<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title>引导页</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
		      <script src="js/mui.min.js"></script>
		    <script src="js/common.js"></script>
		    <link href="css/mui.min.css" rel="stylesheet"/>
		    <link rel="stylesheet" type="text/css" href="css/own.css"/>
		    <script src="js/jquery-1.11.3.js"></script>
        <style>
            /*#close {
                position: absolute;
                width: 160px;
                left: 50%;
                margin-left: -80px;
                bottom: 12%;
                height: 100%;
                padding: 10px;
                color: #fff;
                border-color: #fff;
            }*/
            .item-logo {
                width: 100%;
                height: 100%;
                position: relative;
            }
            .item-logo a {
                width: 200px;
                height: 200px;
                display: block;
                border: 1px solid #FFFFFF;
                border-color: rgba(255, 255, 255, 0.5);
                text-align: center;
                line-height: 200px;
                border-radius: 50%;
                font-size: 40px;
                color: #fff;
                position: absolute;
                top: 15%;
                left: 50%;
                margin-left: -100px;
            }
            /*.animate {
                position: absolute;
                left: 0;
                bottom: 13%;
                height: 20%;
                width: 100%;
                color: #fff;
                display: -moz-box;
                text-align: center;
            }
            .animate h2 {
                text-align: center;
                margin-bottom: 20px;
            }
            .animate li {
                width: 50%;
                height: 30px;
                line-height: 30px;
                list-style: none;
                font-size: 16px;
                text-align: right;
            }
            .animate li:nth-child(3) {
                text-align: left;
                float: right;
            }*/
            .animated {
                -webkit-animation-duration: 1s;
                -webkit-animation-play-state: paused;
                -webkit-animation-fill-mode: both;
            }
            .guide-show .bounceInDown {
                -webkit-animation-name: bounceInDown;
                -webkit-animation-play-state: running;
                -webkit-animation-delay: 1s;
                display: block;
            }
            .guide-show .bounceInLeft {
                -webkit-animation-name: bounceInLeft;
                display: block;
                -webkit-animation-play-state: running;
            }
            .guide-show .bounceInRight {
                -webkit-animation-name: bounceInRight;
                display: block;
                -webkit-animation-play-state: running;
                -webkit-animation-delay: 0.5s;
            }
            @-webkit-keyframes bounceInDown {
                0%, 60%, 75%, 90%, 100% {
                    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                }
                0% {
                    opacity: 0;
                    -webkit-transform: translate3d(0, -3000px, 0);
                    transform: translate3d(0, -3000px, 0);
                }
                60% {
                    opacity: 1;
                    -webkit-transform: translate3d(0, 25px, 0);
                    transform: translate3d(0, 25px, 0);
                }
                75% {
                    -webkit-transform: translate3d(0, -5px, 0);
                    transform: translate3d(0, -5px, 0);
                }
                90% {
                    -webkit-transform: translate3d(0, 3px, 0);
                    transform: translate3d(0, 3px, 0);
                }
                100% {
                    -webkit-transform: none;
                    transform: none;
                }
            }
            @-webkit-keyframes bounceInLeft {
                0%, 60%, 75%, 90%, 100% {
                    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                }
                0% {
                    opacity: 0;
                    -webkit-transform: translate3d(-3000px, 0, 0);
                    transform: translate3d(-3000px, 0, 0);
                }
                60% {
                    opacity: 1;
                    -webkit-transform: translate3d(25px, 0, 0);
                    transform: translate3d(25px, 0, 0);
                }
                75% {
                    -webkit-transform: translate3d(-10px, 0, 0);
                    transform: translate3d(-10px, 0, 0);
                }
                90% {
                    -webkit-transform: translate3d(5px, 0, 0);
                    transform: translate3d(5px, 0, 0);
                }
                100% {
                    -webkit-transform: none;
                    transform: none;
                }
            }
            @-webkit-keyframes bounceInRight {
                0%, 60%, 75%, 90%, 100% {
                    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
                }
                0% {
                    opacity: 0;
                    -webkit-transform: translate3d(3000px, 0, 0);
                    transform: translate3d(3000px, 0, 0);
                }
                60% {
                    opacity: 1;
                    -webkit-transform: translate3d(-25px, 0, 0);
                    transform: translate3d(-25px, 0, 0);
                }
                75% {
                    -webkit-transform: translate3d(10px, 0, 0);
                    transform: translate3d(10px, 0, 0);
                }
                90% {
                    -webkit-transform: translate3d(-5px, 0, 0);
                    transform: translate3d(-5px, 0, 0);
                }
                100% {
                    -webkit-transform: none;
                    transform: none;
                }
            }
           .mui-indicator{
           	background: #FFFFFF !important;
           	opacity: 0.4;
           	box-shadow:none !important;
           
           }
           .mui-active{
           	color:#FFFFFF!important;
           	opacity: 1;
           }
           #skip{
           	position: absolute;
           	/*bottom:2%;
           	right:45%;*/
           	display: inline-block;
           	color:#2B2B2B
           	/*border:5px solid rgba(255, 204, 51, 0.41);
           	background: #FFFFFF;
           	font-size: 14px;
           	width: 50px;
           	height:50px;
           	border-radius: 100%;
           	text-align: center;
           	line-height: 40px;
           	color:#FFCC33;
           	z-index: 999;*/
           }
          #myBtn {
		    width: 100%;
		    height: 80px;
		    position: absolute;
		    top: 75%;
		    left: -4%;
		    text-align: center;
				}
				#closeGuide{
					width: 100%;
					height:80px;
					
					position: absolute;
					top:80%;
					text-align: center;
				}
           #close{
           	width: 120px;
           	height: 40px;
           	border:1px solid #FFFFFF;
           	text-align: center;
         	display: block;
         	margin: auto;
         	color:#FFFFFF;
         	margin: auto;
           }
           .runLeft{ 
           	display: inline;
           }
           #slider{
				width: 100%;           	
           }
           
        </style>
    </head>
 
    <body>
    	
        <div id="slider" class="mui-slider mui-fullscreen" style="background-color: #FFFFFF;">
            <div class="mui-slider-group">
                <!-- 第一张 -->
                <div class="mui-slider-item">
                    <div class="item-logo">
                        <img src="images/startG1.png" style="width: 100%;height: 100%;">
                    </div>
                </div>
                <!-- 第二张 -->
                <div class="mui-slider-item" id="test">
                    <div class="item-logo">
                        <img src="images/startG2.png" style="width: 100%;height: 100%;">
                    </div>
                </div>
                <!--<div class="mui-slider-item" >
                    <div class="item-logo">
                        <img src="images/startG3.png" style="width: 100%;height: 100%;">
                    </div>
                </div>-->
                <!-- 第三张 -->
                <!--<div class="mui-slider-item" >
                    <div class="item-logo">
                        <img src="images/startG4.png" style="width: 100%;height: 100%;">
                    </div>
                </div>     --->    
                <!-- 第五张 -->
                <!--<div class="mui-slider-item" >
                    <div class="item-logo">
                        <img src="images/startG1.png" style="width: 100%;height: 100%;">
                        <!--<div id="closeGuide">
                        	  <button id='close'  class="mui-btn mui-btn-warning mui-btn-outlined">立刻体验 <span class="mui-icon mui-icon-arrowright"></span></button>
                        </div>
                      
                    </div>
                </div>-->
            </div>
		 		<!--<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
						
				</div>-->
				<a id="skip" >立即体验</a>
</div>
           
            <script>
                mui.back = function() {};
                mui.plusReady(function() {
                		var Proportion=1;
						var resolutionWidth=plus.display.resolutionWidth;
						Proportion=resolutionWidth/320;
                	$("#skip").css({
                		"bottom":Proportion*36+"px",
                		"left":Proportion*127+"px",
                		"font-size":Proportion*16+"px",
                	})
                	var endPos;
                	var isScrolling;
                	document.getElementById("test").addEventListener("touchstart",function(event){
                		var touch = event.targetTouches[0];     //touches数组对象获得屏幕上所有的touch，取第一个touch
				            startPos = {x:touch.pageX,y:touch.pageY,time:+new Date};    //取第一个touch的坐标值
				            isScrolling = 0;   //这个参数判断是垂直滚动还是水平滚动
				            console.log(JSON.stringify(startPos));
//				            this.addEventListener('touchmove',this,false);
//				            this.addEventListener('touchend',this,false);
                	})
                	document.getElementById("test").addEventListener("touchmove",function(event){
                		if(event.targetTouches.length > 1 || event.scale && event.scale !== 1) return;
				            var touch = event.targetTouches[0];
				            endPos = {x:touch.pageX - startPos.x,y:touch.pageY - startPos.y};
				            isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1:0;    //isScrolling为1时，表示纵向滑动，0为横向滑动
				            if(isScrolling === 0){
				                event.preventDefault();      //阻止触摸事件的默认行为，即阻止滚屏
				            }
                	});
                	document.getElementById("test").addEventListener("touchend",function(){
                		 var duration = +new Date - startPos.time;    //滑动的持续时间
				            if(isScrolling === 0){    //当为水平滚动时
				                if(Number(duration) > 10){     
				                    //判断是左移还是右移，当偏移量大于10时执行
//				                    if(endPos.x > 80){
//				                        mui.openWindow({
//					                			url:"tzdr/quotation/quotationMain.html",
//					                			id:"quotationMain"
//					                		})
//				                    }
//				                    else 
									// test conflict
										if(endPos.x < -80){
				                       mui.openWindow({
				                			url:"tzdr/quotation/quotationMain.html",
				                			id:"quotationMain"
				                		})
				                    }
				                }
				            }
                	})
                    if (mui.os.ios) {
                        plus.navigator.setFullscreen(true);
                    }
                   plus.navigator.closeSplashscreen();
					document.getElementById("skip").addEventListener('tap', function(event) {
					                    //打开关于页面
					                    mui.openWindow({
					                        url: 'tzdr/quotation/quotationMain.html',
					                        id: 'quotationMain'
					                    });
					                }, false);
                });
                
                 //立即体验按钮点击事件
                
                 //图片切换时，触发动画
               
               document.querySelector('.mui-slider').addEventListener('slide', function(event) {
                      var index = event.detail.slideNumber + 1;
                    if (index == 2 || index == 3) {
                        var item = document.getElementById("tips-" + index);
                        if (item != null && item.classList.contains("mui-hidden")) {
                            item.classList.remove("mui-hidden");
                            item.classList.add("guide-show");
                        } 
                    }
                 });
      </script>
    </body>
 
</html>
